<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .warp {
            /*background:purple;*/
            position: relative;
        }

        .children1 {
            position: absolute;
            background: red;
        }

        .children2 {
            position: absolute;
            background: green;
            right: 10px;
        }
        .children-center{
            position: absolute;
            background: #272fff;
            left: 50%;
        }

    </style>
</head>
<body>


<div class="warp">
    <div class="children1">
        children1
    </div>

    <div class="children-center">
        中心
    </div>

    <div class="children2">
        children2
    </div>

</div>
</body>
</html>